body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
* {
  box-sizing: border-box;
}

.App-header {
  text-align: center;
  background-color: #5592d7;
  border-top: 3px solid #62C79A;
  padding: 8px 16px;
}

.App-header h2 {
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: white;
  font-weight: 600;
}

.info {
  padding: 2em 2em;
  border-left: 3px solid #62C79A;
  margin: 3em 20vw;
}

.fileSelector {
  width: 80vw;
  margin: 0 auto;
  padding-top: 40px;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* headers */
.headers-1 {
  font-size: 36px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.headers-2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

/*file list*/
.file-ls {
  width: 400px;
  margin: 25px 0;
  padding: 0 0 0 16px;
  list-style-type: none;
  display: inline-block;
}

.file-ls li {
  line-height: 30px;
  cursor: pointer;
  font-size: 14px;
  padding: 0 8px 0 40px;
  margin-bottom: 20px;
  position: relative;
}

.file-ls li .icn {
  width: 30px;
  height: 30px;
  background-color: #EEE;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 50%;
}

/*editor*/
.editor {
  margin-top: 40px;
  padding: 0 16px;
}
.editor:after {
  content: '';
  display: block;
  clear: both;
}
.editor h3 {
  margin-bottom: 25px;
}

.editor .editor-opts {
  margin-top: 20px;
}

.editor .cnt-1, .editor .cnt-2 {
  width: 50%;
  display: inline-block;
  float: left;
}

/*version diff*/
.version-diff {
  padding: 0 16px;
}
.version-diff .diff-h {
  text-align: center;
}
.version-diff .diff-h:after {
  content: '';
  display: block;
  clear: both;
}
.version-diff .diff-h .diff-h-sec {
  padding: 0 8px;
  display: inline-block;
  float: left;
}
.version-diff .diff-h .diff-h-sec.button-only {
  margin: 3px 0;
}
.version-diff .diff-h .diff-h-sec .dif-nav {
  padding: 3px;
  display: inline-block;
}
.version-diff .diff-h .diff-h-sec .dif-nav button {
  line-height: 30px;
  border: 0;
  outline: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 3px;
  background: rgba(0,0,0,.1);
  cursor: pointer;
  font-size: 14px;
}
.version-diff .diff-h .diff-h-sec select {
  height: 30px;
  border: 0;
  width: 100px;
  outline: 0;
}

.version-diff-cnt {
  border: 1px solid #EEE;
  padding: 16px;
  margin: 12px 16px 0;
  min-height: 300px;
}


/*buttons*/
.btn {
  margin: 0 5px 0 0;
  padding: 0 16px;
  line-height: 28px;
  background-color: #EEE;
  border-radius: 3px;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  outline: 0;
}
.pr-btn {
  background-color: #5592d7;
  color: white;
}

/*create new*/
.create-new input {
  width: 300px;
  padding: 0 8px;
  border-radius: 3px;
  border: 1px solid #EEE;
  margin-right: 8px;
  line-height: 30px;
}

/*spinner*/
.spinner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: table;
}

.spinner .spinner-cnt {
  width: 100%;
  height: 100%;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.spinner .spinner-cnt .spinner-i {
  width: 50px;
  height: 50px;
  background-image: url("../img/generic_spinner.svg");
  display: inline-block;
  animation: spin .4s linear infinite;
}

@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}